<template>
	<view class="sliderVerify-shade" v-if="show">
		<view class="sliderVerify-wrap">
			<view class="refresh" @click="refresh">
				<image class="refreshImg" src="../../static/weixiao.png"></image>
				<text>刷新</text>
			</view>
			<view class="imgWrap">
				<image class="img" mode="widthFix" :src="src"></image>
				<view class="over" :style="{left:left+'px',top:top+'px'}"></view>
				<view class="smartImg" :style="{left:sleft+'px',top:stop+'px'}">
					<image class="simg" :style="{left:-left+'px',top:-top+'px'}" :src="src"></image>
				</view>
			</view>
			<view class="sliderBox" @touchend="sliderEnd">
				<movable-area class="sliderF">
					<movable-view :animation="true" class="sliderS" :x="sliderx" direction="horizontal"
						@change="startMove">
						<image class="icon" src="../../static/xiangyou.png"></image>
					</movable-view>
				</movable-area>
				<view class="bgC">
					<text>拖动滑块完成整块拼图</text>
					<view class="bgC_left" :style="{width:backLeft+'px'}"></view>
				</view>
			</view>
		</view>
		<image src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/4c3c4c2323cf414bafba415b787c05e5.png"
			mode="aspectFit" @click="cancelSlider" style="width: 80rpx;height: 80rpx;margin-top: 30rpx;"></image>
	</view>
</template>

<script>
	export default {
		name: 'slider-verify',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			show() {
				this.random()
			}
		},
		data() {
			return {
				left: 0,
				top: 0,
				sleft: 0,
				sleftDefault: 0,
				stop: 0,
				sliderx: 0,
				backLeft: 0,
				message: '',
				src: '',
				// bgImg:require("@/static/shareImg.jpg"),//背景图片
				bgImg: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/09929691e39d460abed396d1e0f2cf2c.jpeg', //背景图片
				bgImgList: [
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/09929691e39d460abed396d1e0f2cf2c.jpeg',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/ede5763491114b7e8f6281a76a35d23b.jpg',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/99b8ff57ca5b4f86bfc97c86168bb32d.jpg',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/d454f0eaad7f455ba879fe5795b323a3.jpg',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/da4cc49929f84f6aa06a4126e461f2f7.jpg',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/1d390dc04d154043aa6fd20705cbcc46.jpg',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/49bd9b80329542878bbfd9cda7eaf5b3.png',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/c932cc801d894134bd5ebd3338765190.png',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/4e0e30501d0148298f899a806c44607d.png',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/c08abd35432d4e76a410a288f46b7ece.png',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/7b24e0375b5343f38919c527c8c4df5e.jpeg',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/93cbd8b72af64b888c94eff68eeafec1.jpg',
					'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/00ceff7f7f4c4d21aa77a9dd214cb58d.png'
				]

			}
		},
		mounted() {
			this.random()
		},
		methods: {
			//取消滑块弹窗
			cancelSlider(){
				let sliderSta=false
				this.$emit("sliderStaIsFalse",sliderSta);
			},
			random() {
				let zhengshu = Math.floor(Math.random() * 13); //可均衡获取0到12的随机整数。
				let imgLegth = 8;
				let ram = Math.random().toFixed(2);
				console.log('是整数嘛', ram);
				this.left = Math.floor(80 * ram) + 140; //140-220
				this.top = this.stop = Math.floor(80 * ram) + 10;
				this.sleft = this.sleftDefault = Math.floor(70 * ram) + 10;
				if (Math.floor(imgLegth * ram) == 8) {
					// this.src=this.bgImg;
					this.src = this.bgImgList[zhengshu];
				} else {
					// this.src=this.bgImg;
					this.src = this.bgImgList[zhengshu];
				}
				this.sliderx = 1;
				setTimeout(() => {
					this.sliderx = 0;
					this.refreshStatus = false;
				}, 300)
				console.log('==leftleft===', this.left);
				console.log('==this.sleft===', this.sleft);
				console.log('==ttop===', this.top);
			},
			refresh() {
				this.message = '';
				this.random();
			},
			startMove(e) {
				this.backLeft = e.detail.x + 18;
				this.sleft = this.sleftDefault + e.detail.x;
			},
			sliderEnd() {
				console.log('验证this.left=', this.left);
				console.log('验证this.sleft=', this.sleft);
				let leftData = {
					sleft: this.sleft,
					left: this.left
				}
				this.$emit("sliderVerifySuccessHandle", leftData);
				// if (Math.abs(this.sleft - this.left) <= 3) {
				// 	this.message = '验证成功!';
				//              console.log("[验证成功]")
				// } else {
				// 	this.message = '验证失败，请重试';
				//                 console.log("[验证失败，请重试]")
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '验证失败，请重试'
				// 	});
				// 	setTimeout(() => {
				// 		this.message = '';
				// 		this.sliderx = 1
				// 		setTimeout(() => {
				// 			this.sliderx = 0
				// 		}, 300)
				// 	}, 500)
				// }
			}
		}

	}
</script>

<style lang="scss" scoped>
	.sliderVerify-shade {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.sliderVerify-wrap {
		position: relative;
		background: #fff;
		width: 600rpx;
		border-radius: 15rpx;
		overflow: hidden;

		.refresh {
			position: absolute;
			right: 30rpx;
			bottom: 140rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 1;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.refreshImg {
				transition: all 0.3s;
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}

		.imgWrap {
			position: relative;
			width: 600rpx;
			height: 300rpx;
			border-radius: 15rpx 15rpx 0 0;
			margin: 0 auto;
			overflow: hidden;
			background: #ddd;

			// margin-top: 9px;
			.img {
				display: block;
				width: 100%;
				// height: 100%;
			}

			.over {
				position: absolute;
				left: 0;
				top: 0;
				width: 40px;
				height: 40px;
				background: #ddd;
				box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
			}

			.smartImg {
				position: absolute;
				z-index: 2;
				left: 0;
				top: 0;
				width: 40px;
				height: 40px;
				overflow: hidden;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

				.simg {
					position: absolute;
					display: block;
					width: 280px;
					height: 150px;
				}
			}
		}
	}

	.sliderBox {
		width: 280px;
		margin: 20px auto;
		height: 22px;
		position: relative;

		.sliderF {
			width: 100%;
			height: 100%;
			z-index: 3;

			.sliderS {
				height: 36px;
				width: 36px;
				// background: #EB4D4D;
				background: #f35111;
				border-radius: 36px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: -8px;

				.icon {
					width: 20px;
					height: 20px;
				}
			}
		}

		.bgC {
			position: absolute;
			z-index: 1;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			height: 22px;
			border-radius: 22px;
			line-height: 22px;
			font-size: 14px;
			color: #666666;
			background-color: #E6E6E6;
			box-shadow: inset 0 0 4px #E6E6E6;
			text-align: center;
			overflow: hidden;
		}

		.bgC_left {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 22px;
			border-top-left-radius: 22px;
			border-bottom-left-radius: 22px;
			line-height: 22px;
			font-size: 14px;
			background-color: #f35111;
			box-shadow: inset 0 0 4px #f35111;
			text-align: center;
		}
	}
</style>